﻿<!DOCTYPE html>
<html lang="en">
<head th:replace="~{parts/head}">

<!-- page wrapper -->
<body>

    <div class="boxed_wrapper">

        <!-- preloader -->
        <div class="preloader"></div>
        <!-- preloader -->


        <!-- main header -->
        <header class="main-header style-three">

            <!-- header-lower -->
            <div class="header-lower">
                <div class="outer-box clearfix">
                    <div class="left-column">
                        <div class="logo-box">
                            <figure class="logo"><a href="/"><img src="../../images/logo-3.png" alt=""></a></figure>
                        </div>
                        <div th:replace="~{parts/menu-area}">
                    </div>
                    <div class="right-column pull-right">
                        <div th:replace="~{parts/author-box}">
                    </div>
                </div>
            </div>

            <!--sticky Header-->
            <div class="sticky-header">
                <div class="auto-container">
                    <div class="outer-box">
                        <div class="logo-box">
                            <figure class="logo"><a href="/"><img src="../../images/small-logo.png" alt=""></a></figure>
                        </div>
                        <div class="menu-area">
                            <nav class="main-menu clearfix">
                                <!--Keep This Empty / Menu will come through Javascript-->
                            </nav>
                        </div>
<!--                        <div class="btn-box"><a href="register-page.html" class="theme-btn-one"><i class="icon-image"></i>Join Now</a></div>-->
                    </div>
                </div>
            </div>
        </header>
        <!-- main-header end -->

        <!-- Mobile Menu  -->
        <div class="mobile-menu">
            <div class="menu-backdrop"></div>
            <div class="close-btn"><i class="fas fa-times"></i></div>
            
            <nav class="menu-box">
                <div class="nav-logo"><a href="/"><img src="../../images/logo-2.png" alt="" title=""></a></div>
                <div class="menu-outer"><!--Here Menu Will Come Automatically Via Javascript / Same Menu as in Header--></div>
                <div class="contact-info">
                    <h4>Contact Info</h4>
                    <ul>
                        <li>Chicago 12, Melborne City, USA</li>
                        <li><a href="">+88 01682648101</a></li>
                        <li><a href="mailto:info@example.com">info@example.com</a></li>
                    </ul>
                </div>
                <div class="social-links">
                    <ul class="clearfix">
                        <li><a href="/"><span class="fab fa-twitter"></span></a></li>
                        <li><a href="/"><span class="fab fa-facebook-square"></span></a></li>
                        <li><a href="/"><span class="fab fa-pinterest-p"></span></a></li>
                        <li><a href="/"><span class="fab fa-instagram"></span></a></li>
                        <li><a href="/"><span class="fab fa-youtube"></span></a></li>
                    </ul>
                </div>
            </nav>
        </div><!-- End Mobile Menu -->


        <!--page-title-two-->
        <section class="page-title-two">
            <div class="title-box centred bg-color-2">
                <div class="pattern-layer">
                    <div class="pattern-1" style="background-image: url(../../images/shape/shape-70.png);"></div>
                    <div class="pattern-2" style="background-image: url(../../images/shape/shape-71.png);"></div>
                </div>
                <div class="auto-container">
                    <div class="title">
                        <h1>数据统计</h1>
                    </div>
                </div>
            </div>
            <div class="lower-content">
                <ul class="bread-crumb clearfix">
                    <li><a href="/">主页</a></li>
                    <li><a style="cursor: pointer" onclick="window.history.back(-1);">上一页</a></li>
                    <li>数据统计</li>
                </ul>
            </div>
        </section>
        <!--page-title-two end-->


        <!-- doctors-dashboard -->
        <section class="appointment-section bg-color-3">
            <div class="auto-container">
                <div class="row clearfix">
                    <div class="col-lg-12 col-md-12 col-sm-12 left-column">
                        <div class="appointment-information">
                            <div class="inner-box">
                                <div class="information-form">
                                    <h3>预约量和出诊量图表:</h3>
                                    <form action="book-appointment.html" method="post">
                                        <div class="row clearfix">
                                            <div class="col-lg-6 col-md-12 col-sm-12 form-group">
                                                <label>时间</label>
                                                <select class="wide" id="date" onChange="showChart()">
                                                    <option data-display="选择日期">选择日期</option>
                                                    <option th:each="item:${dates}" th:value="${item.date}" th:text="${item.date}"></option>
                                                </select>
                                            </div>
                                            <div class="col-lg-6 col-md-12 col-sm-12 form-group">
                                                <label>科室</label>
                                                <select class="wide" id="clinicId" onChange="showChart()">
                                                    <option data-display="选择科室">选择科室</option>
                                                    <option th:each="item:${clinics}" th:value="${item.id}" th:text="${item.name}"></option>
                                                </select>
                                            </div>
                                            <div id="main" style="width: 1000px;height:500px;"></div>
                                        </div>
                                    </form>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        <!-- doctors-dashboard -->


        <!-- main-footer -->
        <div th:replace="~{parts/main-footer}"></div>
        <!-- main-footer end -->
        <div th:replace="~{parts/alert-modal}"></div>

        <!--Scroll to top-->
        <button class="scroll-top scroll-to-target" data-target="html" onclick='location.href=("/message?targetId=6")'>
            <img src="../../images/robot-2.png">
        </button>
    </div>

    <script th:replace="~{parts/js}"></script>
    <script src="../../plugins/echarts/echarts.js"></script>
    <script>
        $('#admin_tab').addClass("current");
        $("#date option:first").prop("selected", 'selected');
        $("#clinicId option:first").prop("selected", 'selected');
        let emptyArr = [0, 0, 0, 0, 0, 0, 0];
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));
        // 指定图表的配置项和数据
        var option = {
            title: {
                text: '预约量和出诊量图表'
            },
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'cross',
                    crossStyle: {
                        color: '#999'
                    }
                }
            },
            toolbox: {
                feature: {
                    dataView: { show: true, readOnly: false },
                    magicType: { show: true, type: ['line', 'bar'] },
                    restore: { show: true },
                    saveAsImage: { show: true }
                }
            },
            legend: {
                data: ['预约患者人数', '出诊医生人数', '患者接待上限']
            },
            xAxis: [
                {
                    type: 'category',
                    data: ["08:00-09:00","09:00-10:00","10:00-11:00","13:00-14:00","14:00-15:00","15:00-16:00","17:00-22:00","23:00-07:00"],
                    axisPointer: {
                        type: 'shadow'
                    }
                }
            ],
            yAxis: [
                {
                    type: 'value',
                    name: '预约患者人数',
                    min: 0,
                    // max: 60,
                    interval: 10,
                    axisLabel: {
                        formatter: '{value} 人'
                    }
                },
                {
                    type: 'value',
                    name: '出诊医生人数',
                    min: 0,
                    // max: 6,
                    interval: 1,
                    axisLabel: {
                        formatter: '{value} 人'
                    }
                }
            ],
            series: [
                {
                    name: '预约患者人数',
                    type: 'bar',
                    yAxisIndex: 0,
                    tooltip: {
                        valueFormatter: function (value) {
                            return value + ' 人';
                        }
                    },
                    data: emptyArr
                },
                {
                    name: '出诊医生人数',
                    type: 'bar',
                    yAxisIndex: 1,
                    tooltip: {
                        valueFormatter: function (value) {
                            return value + ' 人';
                        }
                    },
                    data: emptyArr
                },
                {
                    name: '患者接待上限',
                    type: 'line',
                    yAxisIndex: 0,
                    tooltip: {
                        valueFormatter: function (value) {
                            return value + ' 人';
                        }
                    },
                    data: emptyArr
                }
            ]
        };
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);

        function refreshData(outcomeArr, appointmentArr, limitArr){
            //刷新数据
            var option = myChart.getOption();
            option.series[0].data = appointmentArr;
            option.series[1].data = outcomeArr;
            option.series[2].data = limitArr;
            myChart.setOption(option);
        }

        function showChart() {
            if ($('#date').val() == '选择日期' || $('#clinicId').val() == '选择科室') {
                return;
            }
            $.ajax({
                type: "post",
                url:"/admin-statistics/getchart",
                cache: false,
                data: {
                    date: $('#date').val(),
                    clinicId: $('#clinicId').val()
                },
                success: function (data) {
                    if (data.state === "success") {
                        console.log(data);
                        let outcomeArr = data.outcomeArr;
                        let appointmentArr = data.appointmentArr;
                        let limitArr = data.limitArr;
                        refreshData(outcomeArr, appointmentArr, limitArr);//自定义刷新的时候调用
                    }
                },
                error: function(res) {
                    $('#saveFailModal').modal('show');
                }
            });
        }
    </script>
    <style>
        .auto-container {
            max-width: 1200px;
        }
        .appointment-section {
             padding: 20px 0;
        }
        .nice-select ul.list {
            width: 100%;
            height: 300px;
            overflow-y: scroll !important;
        }
    </style>

</body><!-- End of .page_wrapper -->
</html>
